{% extends "base.html" %}
{% load static %}
{% load text_filters %}
{% load math_filters %}

{% block title %}演员名录 | 雲酷影院{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/actors/actors.css' %}">
    <link rel="stylesheet" href="{% static 'css/pagination.css' %}">
{% endblock %}

{% block content %}
    <section class="actor-section">

        <!-- 页面标题 -->
        <div class="page-header text-center mb-5">
            <h1 class="section-title">演员名录</h1>
            <p class="lead text-muted">探索我们完整的演员资料库，了解您喜爱的演员的详细信息</p>
        </div>

        <!-- 演员网格 -->
        <div class="actors-grid">
            <div class="row">
                <!-- 演员卡片模板 -->
                {% for actor in actors %}
                    <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-4">
                        <div class="actor-card">
                            <a href="{% url 'actorDetailInfo' actor.id %}" class="card-link">
                                <div class="actor-img-container">
                                    <img src="{{ actor.avatar.url }}" alt="{{ actor.name }}" class="actor-img">

                                </div>
                            </a>
                            <div class="actor-info">
                                <h3 class="actor-name">{{ actor.name|truncatechars:8 }}</h3>
                                <div class="actor-meta">
                                    <p class="actor-birthday">
                                        <i class="fas fa-birthday-cake me-1"></i>{{ actor.birthday }}</p>
                                    </p>
{#                                    <div class="actor-works">#}
{#                                        <span class="works-title">代表作:</span>#}
{#                                        <span class="works-item">天空之城</span>#}
{#                                        <span class="works-item">花之恋</span>#}
{#                                    </div>#}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        {# 引入分页组件 #}
        {% include "components/pagination.html" with paginator=actors.paginator page_obj=actors max_visible=6 theme="dark" %}

    </section>

{% endblock %}
